<template>
  <div id="app">
    <el-container class="el-container">
      <el-header class="el-header" style=" height: 110px;">
        <el-row  class="el-row" style="height: 110px" >
          <el-col :span="9" style="left: 200px" >
            <img src="logo.png" style="width: 150px;margin-top: 10px;"  />
            <div ::span="3" style="font-size:30px;width:150px;height:80px;display: inline-block;position: absolute;bottom: 20px;" >
              <p><b>欢迎登录</b></p>
            </div>
          </el-col>
          <el-col :span="4" :offset="8" style="" >
            <div style="margin-top: 40px;font-size: 18px;font-family:microsoft yahei;">
              没有账号？
              <a href="/reg" style="color: #c81623;">注册></a>

            </div>
          </el-col>
        </el-row>
        <hr style="margin-top: 120px;">
      </el-header >
      <el-main class="el-main" >
          <div class="el-main-div2">
            <div class="el-main-warn">
              <el-row>
                <el-col ::span="24"><p>本站不会以任何理由要求您转账汇款，谨防诈骗。</p></el-col>
              </el-row>
            </div>
            <!-- 登录表单 -->
            <router-view />
          </div>
      </el-main>
      <el-footer class="el-footer" >
        <div class="el-footer-div" >
          <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
          <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
          <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
        </div>
      </el-footer>

    </el-container>

  </div>
</template>
<style>

html,body,#app,.el-container,.el-header,.el-main,.el-footer,.el-row,.el-footer-div {
  margin: 0;
  padding: 0;
  width: 100%;
  font: 12px/150% Arial,Verdana,"\5b8b\4f53";
  color: #666;
}
html,body,#app{
  bottom: 0;
  height: 100%;
  overflow: hidden;
}
a{
  text-decoration: none;
  display: inline-block;

  font-size: 18px;
  font-family: "microsoft yahei";
  text-align: center;
  position: absolute;

}
.el-header {
  background-color: #FFFFFF;
  color: #333;
  text-align: center;
  line-height: 100px;
}
.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 500px;
  height:550px;
  margin-top: 00px;
  background-image: url('/public/imgs/bg.jpg') ;
  background-size: 100% 100% ;
  position: relative;
  overflow: hidden;

}
.el-main-div2 {
  width: 350px;
  height: 350px;
  background-color: #FFFFFF;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-55%);
}
.el-main-warn{
  width: 350px;
  height: 38.9px;
  background-color:#fff8f0;
  border-bottom: 1px solid #b1b1b1
}
.el-main-login{
  width: 350px;
  height: 55px;
  background-color: #FFFFFF;
  position: absolute;
  top: 39px;
  border-bottom: 1px solid #b1b1b1;
}
.el-main-login-left{
  height: 55px;
  font-weight: 700;
  color: #e4393c;
}
.el-main-login-right{
  height: 55px;
  font-weight: 700;
  color: #e4393c;
}
.el-footer{
  background-color: rgb(63, 63, 63);
}
.el-footer-div {
  background-color: rgb(63, 63, 63);
  text-align: center;
  font-size: 14px;
  color: #b1b1b1;
  height: 130px;
  padding-top: 15px;
}
body > .el-container {
  margin-bottom: 40px;
}
.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  top: 130px;

}
.bts {
  display: flex;
  justify-content: flex-end;
}
</style>
<script>
export default {

}
</script>
